<template>
  <div>
    <el-button type="primary" style="margin-left: 250px" @click="add"
      >新增</el-button
    >
    <div></div>
    <el-table :data="tableData">
      <el-table-column
        v-for="column in tableColumns"
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "BillingManage",
  data() {
    return {
      tableData: [],
      tableColumns: [
        { label: "明细描述", prop: "name" },
        { label: "价格", prop: "price" },
        { label: "日期", prop: "createTime" },
      ],
      pageNum: 1,
      pageSize: 10,
      total: null,
    };
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields();
    },
    list() {
      this.$axios
        .post(this.$httpUrl + "/billing/listPage", {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          param: {
            description: this.description,
          },
        })
        .then((res) => res.data)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
          } else {
            alert("获取数据失败");
          }
        });
    },
 doSave(){
    this.$axios.post(this.$httpUrl+'/billing/save',this.form).then(res=>res.data).then(res=>{
                    if(res.code==200){
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.centerDialogVisible = false,
                        this.list(),
                        this. resetForm()
                    }else{
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                })
            },
    handleEdit(row) {
      // 处理编辑操作
      console.log("编辑", row);
      this.$axios.post(this.$httpUrl + "/billing/update", {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          param: {
            description: this.description,
          },
        })
        .then((res) => res.data)
        .then((res) => {
          res.code == 200;
        });
    },

    handleDelete(row) {
      // 处理删除操作
      console.log("删除", row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = 1;
      this.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.list();
    },
  },

  beforeMount() {
    this.list();
  },
};
</script>
